<template>
  <view class="childrenadd_container app_container_page">
    <view class="form_row">
      <view class="label"> 所在地区 </view>
      <input :value="selectArea" type="text" placeholder="请选择" disabled @click="showAreaPicker = true" />
      <van-icon class="select_arrow" name="arrow" />
    </view>
    <view class="form_row">
      <view class="label"> 幼儿园名称 </view>
      <input :value="kindergarten.name" type="text" @click="goSearch('kindergarten')" placeholder="请选择" disabled />
      <van-icon class="select_arrow" name="arrow" />
    </view>
    <view class="form_row">
      <view class="label"> 所在班级 </view>
      <input :value="classObj.name" type="text" @click="handleClassObjClick" placeholder="请选择" disabled />
      <van-icon class="select_arrow" name="arrow" />
    </view>
    <view class="form_row">
      <view class="label"> 姓名 </view>
      <input :value="children.name" type="text" @click="goSearch('children')" placeholder="请选择" disabled />
      <van-icon class="select_arrow" name="arrow" />
    </view>
    <view class="form_row">
      <view class="label"> 性别 </view>
      <radio-group class="radio_box">
        <label>
          <radio :checked="children.sex == 0" disabled style="transform: scale(0.7)" color="black" />
          <text>小王子</text>
        </label>
        <label>
          <radio :checked="children.sex == 1" disabled style="transform: scale(0.7)" color="black" />
          <text>小公主</text>
        </label>
      </radio-group>
    </view>
    <view class="form_row">
      <view class="label"> 关系 </view>
      <radio-group class="radio_box" @change="handleRadioChange('relation', $event)">
        <label>
          <radio :checked="relation == 0" :value="0" style="transform: scale(0.7)" color="black" />
          <text>爸爸</text>
        </label>
        <label>
          <radio :checked="relation == 1" :value="1" style="transform: scale(0.7)" color="black" />
          <text>妈妈</text>
        </label>
      </radio-group>
    </view>
    <view class="form_row">
      <view class="label"> 是否顺产 </view>
      <radio-group class="radio_box" @change="handleRadioChange('isNaturalLabor', $event)">
        <label>
          <radio :checked="isNaturalLabor == 1" :value="1" style="transform: scale(0.7)" color="black" />
          <text>是</text>
        </label>
        <label>
          <radio :checked="isNaturalLabor == 0" :value="0" style="transform: scale(0.7)" color="black" />
          <text>否</text>
        </label>
      </radio-group>
    </view>
    <view class="form_row">
      <view class="label"> 是否报有课外体育班 </view>
      <radio-group class="radio_box" @change="handleRadioChange('isSports', $event)">
        <label>
          <radio :checked="isSports == 1" :value="1" style="transform: scale(0.7)" color="black" />
          <text>是</text>
        </label>
        <label>
          <radio :checked="isSports == 0" :value="0" style="transform: scale(0.7)" color="black" />
          <text>否</text>
        </label>
      </radio-group>
    </view>
    <view class="form_row" :style="{ visibility: isSports == 0 ? 'visible' : 'hidden' }">
      <view class="label"> 是否有意向给孩子报名 </view>
      <radio-group class="radio_box" @change="handleRadioChange('isIntention', $event)">
        <label>
          <radio :checked="isIntention == 1" :value="1" style="transform: scale(0.7)" color="black" />
          <text>是</text>
        </label>
        <label>
          <radio :checked="isIntention == 0" :value="0" style="transform: scale(0.7)" color="black" />
          <text>否</text>
        </label>
      </radio-group>
    </view>
    <view class="app_button" @click="handleSubmit">添加</view>

    <van-popup :show="showAreaPicker" position="bottom" @close="showAreaPicker = false">
      <van-area :area-list="areaList" @cancel="showAreaPicker = false" @confirm="handleAreaConfirm" />
    </van-popup>
    <van-popup :show="showClassObjPicker" position="bottom" @close="showClassObjPicker = false">
      <van-picker value-key="name" show-toolbar :columns="classList" @cancel="showClassObjPicker = false" @confirm="handleClassConfirm" />
    </van-popup>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import moduleChildren from '@/store/children'
import areaList from '@/lib/area'
import { getClassList, addChild } from '@/api/children'
export default {
  name: 'childrenadd',
  // components: {},
  data() {
    return {
      showAreaPicker: false,
      showClassObjPicker: false,
      classList: [],
      //
      studentId: null,
      relation: '0',
      isSports: '1',
      isIntention: '1',
      isNaturalLabor: '1',
      areaList: Object.freeze(areaList),
      //
      pending: false
    }
  },
  computed: {
    ...mapState({
      province: (state) => state.moduleChildren.area.province,
      city: (state) => state.moduleChildren.area.city,
      district: (state) => state.moduleChildren.area.district,
      kindergarten: (state) => state.moduleChildren.kindergarten,
      classObj: (state) => state.moduleChildren.classObj,
      children: (state) => state.moduleChildren.children
    }),
    selectArea() {
      return this.province && this.city && this.district ? `${this.province}-${this.city}-${this.district}` : ''
    }
  },
  watch: {
    // 级联
    selectArea() {
      this.cascadeReset('selectArea')
    }
  },
  methods: {
    async fetchClassList() {
      if (!this.kindergarten.id) return
      try {
        const res = await getClassList(this.kindergarten.id)
        this.classList = res.data.map((per) => {
          return {
            name: per.name,
            id: per.id
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    cascadeReset(type) {
      const typeArr = ['selectArea', 'kindergarten', 'classObj', 'children']
      const tarIndex = typeArr.findIndex((per) => per === type)
      for (let i = tarIndex + 1; i < typeArr.length; i++) {
        this.$store.commit('moduleChildren/SET_VALUE', {
          key: typeArr[i],
          val: {
            id: null,
            name: '',
            sex: undefined
          }
        })
        // console.log(this[typeArr[i]])
      }
    },
    handleClassConfirm(event) {
      // console.log(event.detail)
      const { name, id } = event.detail.value
      this.$store.commit('moduleChildren/SET_VALUE', {
        key: 'classObj',
        val: {
          id,
          name
        }
      })
      this.cascadeReset('classObj')
      this.showClassObjPicker = false
    },
    goSearch(type) {
      if (!this.validCascade(type)) return
      uni.navigateTo({
        url: '/pages/children/search?type=' + type
      })
    },
    validCascade(type) {
      const mapObj = {
        selectArea: '地区',
        kindergarten: '幼儿园',
        classObj: '班级',
        children: '孩子'
      }
      let keys = Object.keys(mapObj)
      if (type) {
        const tarIndex = keys.findIndex((per) => per === type)
        keys = keys.splice(0, tarIndex)
      }
      // console.log(keys)
      for (const key of keys) {
        if ((key === 'selectArea' && this[key] === '') || (key !== 'selectArea' && !this[key].id)) {
          uni.showToast({
            icon: 'none',
            title: `请先选择${mapObj[key]}`
          })
          return false
        }
      }
      return true
    },
    handleAreaConfirm(obj) {
      // console.log(obj.detail)
      const [province, city, district] = obj.detail.values.map((per) => per.name)
      this.$store.commit('moduleChildren/SET_VALUE', {
        key: 'area',
        val: {
          province,
          city,
          district
        }
      })
      this.showAreaPicker = false
    },
    handleClassObjClick() {
      if (!this.validCascade('classObj')) return
      this.showClassObjPicker = true
    },
    handleRadioChange(prop, event) {
      this[prop] = event.target.value
    },
    async handleSubmit() {
      //
      if (!this.validCascade() || this.pending) return
      this.pending = true
      console.log('submit')
      try {
        const res = await addChild({
          studentId: this.children.id,
          relation: this.relation,
          isSports: this.isSports,
          isIntention: this.isIntention,
          isNaturalLabor: this.isNaturalLabor
        })
        if (res.code === 200) {
          uni.showToast({
            icon: 'none',
            title: '添加成功'
          })
          uni.navigateBack()
        }
      } catch (error) {
        console.log(error)
      }
      this.pending = false
    }
  },
  beforeCreate() {
    this.$registerVuexModule('moduleChildren', moduleChildren)
  },
  onShow() {
    if (this.kindergarten.id) {
      this.fetchClassList()
    }
  }
}
</script>

<style lang="scss">
.childrenadd_container {
  padding: 15rpx 0;
  .form_row {
    position: relative;
    padding: 30rpx 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    .label {
      flex: 0 0 auto;
      padding-right: 30rpx;
    }

    .van-icon {
      position: absolute;
      right: 15rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    input {
      flex: 1 0 auto;
      text-align: right;
      padding-right: 30rpx;
    }

    .radio_box {
      display: flex;
      align-items: center;
      label {
        display: flex;
        align-items: center;
      }

      text {
        padding: 0 10rpx;
        width: 100rpx;
      }
    }
  }

  .app_button {
    display: block;
    width: 375rpx;
    margin: 90rpx auto 0;
  }
}
</style>
